<template>
	<view class="bigbox">
		<view class="box" >
			开启          <switch color="red" class="left"></switch> 
		</view>
		<hr>
		<view class="box" >
			关闭          <switch color="red" class="left"></switch>
		</view>
		<hr>
		<view class="box" >
			加速          <switch color="red" class="left"></switch>
		</view>
		<hr>
		<view class="box last" >
			减速          <switch color="red" class="left"></switch>
		</view>
		<view class="select">
			请选择需要控制的小车：
			<select>
				<option>10291314</option>
				<option>138147141</option>
				<option>418497157</option>
				<option>138142131</option>
				<option>418431457</option>
			</select>
		</view>
		
		
		<view class="outter-circle">
		    <view class="inner-parts brown" bindtap="button" data-type="volAdd">
		      <text class="rotate">前进</text>
		    </view>
		    <view class="inner-parts silver" bindtap="button" data-type="chaAdd">
		      <text class="rotate">右移</text>
		    </view>
		    <view class="inner-parts blue" bindtap="button" data-type="chaDes">
		      <text class="rotate">左移</text>
		    </view>
		    <view class="inner-parts gold" bindtap="button" data-type="volDes">
		      <text class="rotate">后退</text>
		    </view>
		
		    <view class="inner-circle" bindtap="button" data-type="ok">
		      <text class="ok rotate">ok</text>
		    </view>
		  </view>
		
	</view>
	
	
</template>

<script>
	
</script>

<style>
	
	.select {
		margin-left: 30rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.last {
		/* margin-bottom: 150rpx; */
	}
	
	.box {
		margin-top: 20rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height: 100rpx;
		background: white;
		line-height: 100rpx;
		/* background: pink; */
	}
	.left {
		float: right;
	}
	
	.button-group {
	  padding-top: 20rpx;
	  width: 300rpx;
	  height: 300rpx;
	  background-color: pink;
	}
	.outter-circle {
	  position: relative;
	  margin-left: 220rpx;
	  width: 280rpx;
	  height: 280rpx;
	  background-color: lightcyan;
	  border-radius: 100%;
	  overflow: hidden;
	  transform-origin: center;
	  transform: rotate(45deg);
	}
	.inner-parts {
	  float: left;
	  width: 140rpx;
	  height: 140rpx;
	  line-height: 140rpx;
	  text-align: center;
	}
	.silver {
	  background-color: #E8E8E8;
	}
	.gold {
	  background-color: #CFCFCF;
	}
	.blue {
	  background-color: #B5B5B5;
	}
	.brown {
	  background-color: #9C9C9C;
	}
	.inner-circle {
	  position: absolute;
	  margin-top: 70rpx;
	  margin-left: 70rpx;
	  width: 140rpx;
	  height: 140rpx;
	  line-height: 140rpx;
	  text-align: center;
	  border-radius: 100%;
	  background-color: #eee;
	}
	.rotate {
	  display: inline-block;
	  transform: rotate(-45deg);
	}
</style>